<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../hy-css.css">
  <style>
    /* 使用他来改变默认边框颜色 */
    :root {
      --border-color-primary: rgb(133, 55, 55);
    }
    .box {
      background-color: #eee;
    }
    .child {
      height: 30px;
      background-color: #777;
    }
    .children {
      height: 80px;
      background-color: #333;
    }
  </style>
</head>
<body class="border-5">
  <!-- -------------------------标准栅格start------------------------------- -->
  <!-- 子元素每一项栅格数相加不可超过父元素栅格数量 -->
  <!-- 一列24格 -->
  <div class="box con-24">
    <div class="child span-6"></div>
    <div class="child span-12 offset-6"></div>
  </div>

  <!-- 一列10格 -->
  <div class="box con-10 mar-t-20">
    <div class="child span-2"></div>
    <div class="child span-1 offset-2"></div>
    <div class="child span-1"></div>
    <div class="child span-2 offset-2"></div>
  </div>

  <!-- 一列12格 -->
  <div class="box con-12 mar-t-20">
    <div class="child span-2 offset-2"></div>
    <div class="child span-1 offset-2"></div>
    <div class="child span-1"></div>
    <div class="child span-2 offset-2"></div>
  </div>

  <!-- flex快速实现元素居右 -->
  <div class="box flex mar-t-20">
    <div class="space"></div>
    <div class="child" style="width: 300px;"></div>
  </div>
  <!-- -------------------------标准栅格end------------------------------- -->

  <!-- -------------------------flex栅格布局start------------------------------- -->
  <!-- tip:不带类名的子元素表示偏移作用 -->
  <div class="box flex mar-t-20">
    <div span="5"></div>
    <div span="7" class="child border-l-3 border-r-3"></div>
    <div span="2"></div>
    <div span="10" class="child"></div>
  </div>

  <!-- flex栅格布局 -->
  <!-- 也可以栅格布局offset混用 但父元素需添加 con-24类名 -->
  <div class="box con-24 flex mar-t-20 mar-b-20  border-b-3">
    <div span="7" class="child offset-5"></div>
    <div span="10" class="child offset-2"></div>
  </div>

  <div class="box flex border-1" style="height: 600px; width: 50px;" flex-column>
    <div span="6" class="children"></div>
    <div span="6"></div>
    <div  span="12" class="children"></div>
  </div>
  <!-- -------------------------flex栅格布局end------------------------------- -->
</body>
</html>